<template>
    <div class="print-js-container"  id="printElement">
      <!-- 自定义组件引用 -->
      <div class="print-btn" @click="pdfPrint">PDF的打印</div>
      <div class="print-btn" @click="htmlPrint">html的打印</div>
      <div class="print-btn" @click="imgPrint">图片的打印</div>
      <div class="print-btn" @click="jsonPrint">JSON的打印</div>
    </div>
</template>

<script>
/**
 * 使用：
 *  import 'print-js'
*/
const pdfUrl = require('../../../../assets/pdf/api.pdf').default
const img1 = require('../../../../assets/images/test/img1.jpg').default
const img2 = require('../../../../assets/images/test/img2.jpg').default
const printJson = require('./print.json')
const defaultOptions = {
  documentTitle: '文档',
  header: '<h3 class="custom-h3">API介绍</h3>',
  style: '.custom-h3 { color: #368fff; }'
}
console.log(pdfUrl)

export default {
  name: "Print",
  data() {
    return {
      formLabelAlign: {
        name: '张三',
        region: '合肥',
        type: '自由活动'
      }
    }
  },
  created() {
  },
  methods: {
    // pdf打印
    pdfPrint() {
      printJS({
        printable: pdfUrl, 
        type: 'pdf',
        showModal: true,
        modalMessage: '正在努力解析中，请稍后...'
      })
    },
    htmlPrint() {
      printJS({
        printable: 'printElement', 
        type: 'html',
        css: '/dist/static/styles/print.css' // 引入渲染的样式
      })
    },
    // 图片打印
    imgPrint() {
      printJS({
        // printable: img1, // 单张图片
        printable: [img1, img2], // 多张图片
        type: 'image',
        imageStyle: 'margin-bottom:20px;'
      })
    },
    // json打印
    jsonPrint() {
      const options = {
        printable: printJson, 
        // properties: ['params', 'default', 'description'],
        properties: [
          { field: 'params', displayName: '参数'},
          { field: 'default', displayName: '默认'},
          { field: 'description', displayName: '说明'}
        ],
        type: 'json',
        gridHeaderStyle: 'border: 1px solid #3971A5; color: #3971A5;',
        gridStyle: 'border: 1px solid #3971A5; text-align: center; color: #666666;'
      }
      printJS({
        ...defaultOptions,
        ...options
      })
    }
  }
};
</script>
